<template>
  <div id="theA" style="width: 100%; height: 800px"></div>
</template>
<script>
// import { defineComponent } from '@vue/composition-api'
import * as echarts from "echarts";
import axios from "axios";
import  CryptoJS from "crypto-js";
import {generateAuthorization}  from "../assets/pre_request.js";


export default {
  name: "express Api",
  data() {
    var data = {
      data_part: [], // 用this.data_part调用此变量
      // ,data_full: []
      coffee_data: [],
      coffee_checkData: [],
    };
    return data;
  },
  beforeCreate() {
    const apiA_method = 'GET';
    // const apiA_host = "rankcity.api.bdymkt.com";
    const apiA_host = "rankcity.api.bdymkt.com";
    const apiA_path = "rankcity"; //rankcity
    const apiA_query = "";
    const apiA_header = { 'host':"rankcity.api.bdymkt.com",'content-type':'application/json;charset=utf-8' }; //'host':"rankcity.api.bdymkt.com"
    const apiA_signHeader = 'host;content-type';
    


    const requireB = axios.create({
      baseURL: ""
    });

    requireB.interceptors.request.use(
      config =>{
        // config.headers['host']=
        //   `${apiA_host}`;
        config.headers['X-Bce-Signature']=
          `${generateAuthorization(apiA_method,apiA_path,apiA_query,apiA_header,apiA_signHeader)}`;
        console.log(config);
        return config;
      },
      error =>{
        return Promise.reject(error);
      }
    );
    requireB({
      methods:apiA_method,
      url:'/'+apiA_path,
      headers:{ 'content-type':'application/json;charset=utf-8'}
    })
    .catch(function (error) {
    if (error.response) {
      // 请求已发出，但服务器响应的状态码不在 2xx 范围内
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else {
      console.log('Error', error.message);
    }
    console.log(error.config);
  }).then((res) => {

      console.log(res, "res", isNaN(res));
    });
    
    
  },
  mounted() {
    this.rewriteData();
    this.PicEchartA();
  },
  methods: {
    rewriteData() {
      var that = this;
      //处理过程用函数封装

      function process() {
        let repeat_city = [];
        let indexInfo = [];

        // console.log(that.coffee_checkData);
        //整理含有多余数据的城市集
        for (let i in that.coffee_checkData) {
          // console.log(this.coffee_checkData[i], "coffee_data[i]");
          if (that.coffee_checkData[i]["times"] > 1) {
            // console.log(">1");
            repeat_city.push(that.coffee_checkData[i]["cityname"]);
          }
        }

        //整理单个城市的所有star值
        // console.log(repeat_city);
        for (let city in repeat_city) {
          // console.log(repeat_city[city], "city");
          let repeat_data = [];
          for (let i in that.coffee_data) {
            // console.log(this.coffee_data[i], "coffee_data[i]");
            if (that.coffee_data[i]["cityname"] == repeat_city[city]) {
              repeat_data.push(that.coffee_data[i]["stars"]);
            }
          }
          indexInfo.push(repeat_data);
        }
        // console.log(indexInfo);
        //消除star非所属城市里最大值的个体
        for (let listIndex in indexInfo) {
          console.log(listIndex, indexInfo[listIndex], "列表");
          var theMaxValue = Math.max.apply(null, indexInfo[listIndex]);
          console.log(theMaxValue, "最大值");
          that.coffee_data = that.coffee_data.filter((bar) => {
            //返回star是最高值的个体数据
            // console.log(bar);
            return (
              bar["cityname"] != repeat_city[listIndex] ||
              bar["stars"] == theMaxValue
            );
          });
        }
      }
      setTimeout(() => {
        process();
        console.log(this.coffee_data, "咖啡馆数据");
      }, 300);
    },
    PicEchartA() {
      var chartC = echarts.init(document.getElementById("theA"));
      // console.log(this.data_part, "检验");
      var option = {
        title: {
          text: "双柱图",
          top: "3%",
          left: "center",
          textStyle: { fontSize: 18 },
        },
        legend: {},
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          // grid: [
          //   { bottom: 61, left: "center" },
          //   { height: 60, bottom: 0, left: "center" },
          // ],
          // position: function (pos, params, el, elRect, size) {
          //   var obj = { top: 10 };
          //   obj[["left", "right"][+(pos[0] < size.viewSize[0] / 2)]] = 30;
          //   return obj;
          // },
          extraCssText: "width: 300px", //个体信息框宽度
        },
        dataset: {
          source: this.data_part,
          // dimensions: ["title", "deny", "denyTimes"],
        },
        xAxis: {
          type: "category",
          name: "酒店",
          axisLabel: {
            interval: 0, //轴刻度标签全部显示
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            type: "bar",
            name: "拒订",
          },
          {
            type: "bar",
            name: "拒绝订单率",
          },
        ],
      };

      var that = this; // 缓存指针

      // 延迟数毫秒后应用配置项
      setTimeout(function () {
        // console.log("set内", that.data_part, "this指向", this.data_part);
        if (isNaN(that.data_part)) {
          // console.log("set>if内", that.data_part, "this指向", this.data_part);

          chartC.setOption(option);
        } else {
          console.log("data not found");
        }
      }, 400);
    },
  },
};
</script>